<template>
  <div class="factory-min-container" >
    <SideMenu />
    <div class="factory-min-middle-main">
      <div class="factory-min-middle-main-info">
        <table>
          <tr>
            <td class="align-right">车间/线别:</td>
            <td class="align-left">MiNi产品线装配车间B3-5F-MI02</td>
            <td class="align-right">产品名称:</td>
            <td class="align-left">DC3001386</td>
            <td class="align-right">类&nbsp;别:</td>
            <td class="align-left">B3-5F-MI02</td>
            <td class="align-right">日期:</td>
            <td class="align-left">2023-4-25</td>
          </tr>
          <tr>
            
            <td class="align-right">DT损失率:</td>
            <td class="align-left">23.04%</td>
            <td class="align-right">产品编码:</td>
            <td class="align-left">DC3001386</td>
            <td class="align-right">产品线:</td>
            <td class="align-left">B3-5F-MI02</td>
            <td class="align-right">FTY:</td>
            <td class="align-left">96.68%</td>
          </tr>
          <tr>
            
            <td class="align-right">连续达标次数:</td>
            <td class="align-left">188</td>
            <td class="align-right">不良品数:</td>
            <td class="align-left">188</td>
            <td class="align-right">批次号:</td>
            <td class="align-left">23040499</td>
            <td class="align-right">节拍:</td>
            <td class="align-left">5.05</td>
          </tr>
        </table>
      </div>

      <div class="factory-min-middle-main-tbl">
        <dv-scroll-board :config="tbConfig1" style="height: 140px;"/>
      </div>
      <div class="factory-min-middle-main-tbl">
        <dv-scroll-board :config="tbConfig2" style="height: 290px;" />
      </div>

      <div class="factory-min-middle-main-bar">
        <div class="factory-min-middle-main-bar-item">
          <RingCharCmp class="factory-min-middle-main-bar-item-cmp" :config="ringChart1" title="当天安灯呼叫次数"/>
        </div>
        <div class="factory-min-middle-main-bar-item">
          <RingCharCmp class="factory-min-middle-main-bar-item-cmp" :config="ringChart2" title="不良类别TOP分布"/>
        </div>
        <div class="factory-min-middle-main-bar-item">
          <RingCharCmp class="factory-min-middle-main-bar-item-cmp" :config="ringChart3" title="计划外DT损失TOP分布"/>
        </div>
      </div>
    </div>
    <div class="factory-min-right-bar">
      <!-- <div class="factory-min-right-bar-item">
        <PillarLineEchartsCmp class="pillar-line-cmp" title="小型产出达成率" :config="pillarLineCmpConfig1" :background-url="backgroundUrl1" subTitle="达成率" :key="1" />
      </div>
      <div class="factory-min-right-bar-item" style="margin-top: 10px;">
        <PillarLineEchartsCmp class="pillar-line-cmp" title="小型计划外DT损失率" :config="pillarLineCmpConfig2" :background-url="backgroundUrl2" :key="2" />
      </div>
      <div class="factory-min-right-bar-item" style="margin-top: 10px;">
        <PillarLineEchartsCmp class="pillar-line-cmp" title="小型任务令准时达成率" :config="pillarLineCmpConfig3" :background-url="backgroundUrl3" subTitle="达成率" :key="3"/>
      </div>
      <div class="factory-min-right-bar-item" style="margin-top: 10px;">
        <PillarLineEchartsCmp class="pillar-line-cmp" title="小型产品线FTY达成状况" :config="pillarLineCmpConfig4" :background-url="backgroundUrl4" :key="4" />
      </div> -->

      <div class="factory-min-right-bar-item">
        <TbCmp :data="tb1Data" />
      </div>
      
      <div class="factory-min-right-bar-item">
        <TbCmp :data="tb2Data"/>
      </div>
    </div>
    
  </div>
</template>

<script>
// import PillarLineEchartsCmp from '../components/factory/PillarLineEchartsCmp.vue';
import TbCmp from '../components/factory/TbCmp.vue';
import RingCharCmp from '../components/factory/RingCharCmp.vue';
import SideMenu from '../components/factory/SideMenu.vue';
export default {
  name: 'factoryMinDetail',
  data() {
    return {
      tbConfig1: {
        headerBGC: "rgba($color: #005ABF, $alpha: 0.4)",
        header: ['生产采集点', '产品编码', '实时累计目标', '实时累计产出', 'DT损失率', '目标次数', '达成次数', '8:30', '9:30', '10:30', '11:30', '12:30', '13:30', '14:30', '15:30'],
        data: [
          ['MiNi产品线', 'DC30013', '7143', '5479', '23.04%', '10', '7', '70.00%', '<span class="tbl-row-style" style="background-color: green;">564</span>', '<span class="tbl-row-style" style="background-color: green;">564</span>', '<span class="tbl-row-style" style="background-color: green;">564</span>', '564', '<span class="tbl-row-style" style="color: #21bccd;">564</span>', '<span class="tbl-row-style" style="background-color: green;">564</span>', '<span class="tbl-row-style" style="background-color: green;">564</span>'],
          ['MiNi产品线', 'DC30013', '7143', '7143', '2%', '10', '3', '30.00%', '<span class="tbl-row-style" style="background-color: green;">354</span>', '<span class="tbl-row-style" style="color: #21bccd;">354</span>', '<span class="tbl-row-style" style="color: #21bccd;">354</span>', '354', '<span class="tbl-row-style" style="color: #21bccd;">354</span>', '<span class="tbl-row-style" style="background-color: green;">354</span>', '<span class="tbl-row-style" style="background-color: green;">354</span>'],
          ['MiNi产品线', 'DC30013', '7143', '7143', '3.66%', '10', '7', '70.00%', '451', '<span class="tbl-row-style" style="background-color: green;">451</span>', '<span class="tbl-row-style" style="background-color: green;">451</span>', '451', '<span class="tbl-row-style" style="color: #21bccd;">451</span>', '<span class="tbl-row-style" style="background-color: green;">451</span>', '<span class="tbl-row-style" style="background-color: green;">451</span>'],
          ['MiNi产品线', 'DC30013', '7143', '7143', '3.66%', '10', '7', '70.00%', '453', '<span class="tbl-row-style" style="background-color: red;">453</span>', '<span class="tbl-row-style" style="background-color: red;">453</span>', '453', '<span class="tbl-row-style" style="color: #21bccd;">453</span>', '<span class="tbl-row-style" style="background-color: red;">453</span>', '<span class="tbl-row-style" style="background-color: red;">453</span>'],
          ['MiNi产品线', 'DC30013', '5478', '5478', '33.04%', '10', '7', '80.00%', '684', '684', '684', '684', '684', '684', '684'],
        ],
        columnWidth: [90,80,108,108,90,80,80,70],
        oddRowBGC: "rgba($color: #005ABF, $alpha: 0.2)",
        evenRowBGC: "rgba($color: #005ABF, $alpha: 0.2)",
        rowNum: 3,
      },
      tbConfig2: {
        headerBGC: "rgba($color: #005ABF, $alpha: 0.4)",
        header: ['生产采集点', '产品编码', '实时累计目标', '实时累计产出', 'DT损失率', '目标次数', '达成次数', '8:30', '9:30', '10:30', '11:30', '12:30', '13:30', '14:30', '15:30'],
        data: [
          ['MiNi产品线', 'DC30013', '7143', '5479', '23.04%', '10', '7', '70.00%', '<span class="tbl-row-style" style="background-color: green;">564</span>', '<span class="tbl-row-style" style="background-color: green;">564</span>', '<span class="tbl-row-style" style="background-color: green;">564</span>', '564', '<span class="tbl-row-style" style="color: #21bccd;">564</span>', '<span class="tbl-row-style" style="background-color: green;">564</span>', '<span class="tbl-row-style" style="background-color: green;">564</span>', ],
          ['MiNi产品线', 'DC30013', '7143', '7143', '2%', '10', '3', '30.00%', '<span class="tbl-row-style" style="background-color: green;">354</span>', '<span class="tbl-row-style" style="color: #21bccd;">354</span>', '<span class="tbl-row-style" style="color: #21bccd;">354</span>', '354', '<span class="tbl-row-style" style="color: #21bccd;">354</span>', '<span class="tbl-row-style" style="background-color: green;">354</span>', '<span class="tbl-row-style" style="background-color: green;">354</span>', ],
          ['MiNi产品线', 'DC30013', '7143', '7143', '3.66%', '10', '7', '70.00%', '451', '<span class="tbl-row-style" style="background-color: green;">451</span>', '<span class="tbl-row-style" style="background-color: green;">451</span>', '451', '<span class="tbl-row-style" style="color: #21bccd;">451</span>', '<span class="tbl-row-style" style="background-color: green;">451</span>', '<span class="tbl-row-style" style="background-color: green;">451</span>', ],
          ['MiNi产品线', 'DC30013', '7143', '7143', '3.66%', '10', '7', '60.00%', '453', '<span class="tbl-row-style" style="background-color: red;">453</span>', '<span class="tbl-row-style" style="background-color: red;">453</span>', '453', '<span class="tbl-row-style" style="color: #21bccd;">453</span>', '<span class="tbl-row-style" style="background-color: red;">453</span>', '<span class="tbl-row-style" style="background-color: red;">453</span>', ],
          ['MiNi产品线', 'DC30013', '5478', '5478', '33.04%', '10', '7', '80.00%', '684', '684', '684', '684', '684', '684', '684', ],
          ['MiNi产品线', 'DC30013', '7143', '5479', '23.04%', '10', '7', '70.00%', '<span class="tbl-row-style" style="background-color: green;">564</span>', '<span class="tbl-row-style" style="background-color: green;">564</span>', '<span class="tbl-row-style" style="background-color: green;">564</span>', '564', '<span class="tbl-row-style" style="color: #21bccd;">564</span>', '<span class="tbl-row-style" style="background-color: green;">564</span>', '<span class="tbl-row-style" style="background-color: green;">564</span>', ],
          ['MiNi产品线', 'DC30013', '7143', '7143', '2%', '10', '3', '30.00%', '<span class="tbl-row-style" style="background-color: green;">354</span>', '<span class="tbl-row-style" style="color: #21bccd;">354</span>', '<span class="tbl-row-style" style="color: #21bccd;">354</span>', '354', '<span class="tbl-row-style" style="color: #21bccd;">354</span>', '<span class="tbl-row-style" style="background-color: green;">354</span>', '<span class="tbl-row-style" style="background-color: green;">354</span>', ],
          ['MiNi产品线', 'DC30013', '7143', '7143', '3.66%', '10', '7', '70.00%', '451', '<span class="tbl-row-style" style="background-color: green;">451</span>', '<span class="tbl-row-style" style="background-color: green;">451</span>', '451', '<span class="tbl-row-style" style="color: #21bccd;">451</span>', '<span class="tbl-row-style" style="background-color: green;">451</span>', '<span class="tbl-row-style" style="background-color: green;">451</span>', ],
          ['MiNi产品线', 'DC30013', '7143', '7143', '3.66%', '10', '7', '60.00%', '453', '<span class="tbl-row-style" style="background-color: red;">453</span>', '<span class="tbl-row-style" style="background-color: red;">453</span>', '453', '<span class="tbl-row-style" style="color: #21bccd;">453</span>', '<span class="tbl-row-style" style="background-color: red;">453</span>', '<span class="tbl-row-style" style="background-color: red;">453</span>', ],
          ['MiNi产品线', 'DC30013', '5478', '5478', '33.04%', '10', '7', '80.00%', '684', '684', '684', '684', '684', '684', '684', ],
          ['MiNi产品线', 'DC30013', '7143', '5479', '23.04%', '10', '7', '70.00%', '<span class="tbl-row-style" style="background-color: green;">564</span>', '<span class="tbl-row-style" style="background-color: green;">564</span>', '<span class="tbl-row-style" style="background-color: green;">564</span>', '564', '<span class="tbl-row-style" style="color: #21bccd;">564</span>', '<span class="tbl-row-style" style="background-color: green;">564</span>', '<span class="tbl-row-style" style="background-color: green;">564</span>', ],
          ['MiNi产品线', 'DC30013', '7143', '7143', '2%', '10', '3', '30.00%', '<span class="tbl-row-style" style="background-color: green;">354</span>', '<span class="tbl-row-style" style="color: #21bccd;">354</span>', '<span class="tbl-row-style" style="color: #21bccd;">354</span>', '354', '<span class="tbl-row-style" style="color: #21bccd;">354</span>', '<span class="tbl-row-style" style="background-color: green;">354</span>', '<span class="tbl-row-style" style="background-color: green;">354</span>', ],
          ['MiNi产品线', 'DC30013', '7143', '7143', '3.66%', '10', '7', '70.00%', '451', '<span class="tbl-row-style" style="background-color: green;">451</span>', '<span class="tbl-row-style" style="background-color: green;">451</span>', '451', '<span class="tbl-row-style" style="color: #21bccd;">451</span>', '<span class="tbl-row-style" style="background-color: green;">451</span>', '<span class="tbl-row-style" style="background-color: green;">451</span>', ],
          ['MiNi产品线', 'DC30013', '7143', '7143', '3.66%', '10', '7', '60.00%', '453', '<span class="tbl-row-style" style="background-color: red;">453</span>', '<span class="tbl-row-style" style="background-color: red;">453</span>', '453', '<span class="tbl-row-style" style="color: #21bccd;">453</span>', '<span class="tbl-row-style" style="background-color: red;">453</span>', '<span class="tbl-row-style" style="background-color: red;">453</span>', ],
          ['MiNi产品线', 'DC30013', '5478', '5478', '33.04%', '10', '7', '80.00%', '684', '684', '684', '684', '684', '684', '684', ],
          ['MiNi产品线', 'DC30013', '7143', '5479', '23.04%', '10', '7', '70.00%', '<span class="tbl-row-style" style="background-color: green;">564</span>', '<span class="tbl-row-style" style="background-color: green;">564</span>', '<span class="tbl-row-style" style="background-color: green;">564</span>', '564', '<span class="tbl-row-style" style="color: #21bccd;">564</span>', '<span class="tbl-row-style" style="background-color: green;">564</span>', '<span class="tbl-row-style" style="background-color: green;">564</span>', ],
          ['MiNi产品线', 'DC30013', '7143', '7143', '2%', '10', '3', '30.00%', '<span class="tbl-row-style" style="background-color: green;">354</span>', '<span class="tbl-row-style" style="color: #21bccd;">354</span>', '<span class="tbl-row-style" style="color: #21bccd;">354</span>', '354', '<span class="tbl-row-style" style="color: #21bccd;">354</span>', '<span class="tbl-row-style" style="background-color: green;">354</span>', '<span class="tbl-row-style" style="background-color: green;">354</span>', ],
          ['MiNi产品线', 'DC30013', '7143', '7143', '3.66%', '10', '7', '70.00%', '451', '<span class="tbl-row-style" style="background-color: green;">451</span>', '<span class="tbl-row-style" style="background-color: green;">451</span>', '451', '<span class="tbl-row-style" style="color: #21bccd;">451</span>', '<span class="tbl-row-style" style="background-color: green;">451</span>', '<span class="tbl-row-style" style="background-color: green;">451</span>', ],
          ['MiNi产品线', 'DC30013', '7143', '7143', '3.66%', '10', '7', '60.00%', '453', '<span class="tbl-row-style" style="background-color: red;">453</span>', '<span class="tbl-row-style" style="background-color: red;">453</span>', '453', '<span class="tbl-row-style" style="color: #21bccd;">453</span>', '<span class="tbl-row-style" style="background-color: red;">453</span>', '<span class="tbl-row-style" style="background-color: red;">453</span>', ],
          ['MiNi产品线', 'DC30013', '5478', '5478', '33.04%', '10', '7', '80.00%', '684', '684', '684', '684', '684', '684', '684', ],
        ],
        columnWidth: [90,80,108,108,90,80,80,70],
        oddRowBGC: "rgba($color: #005ABF, $alpha: 0.2)",
        evenRowBGC: "rgba($color: #005ABF, $alpha: 0.2)",
        rowNum: 1097,
      },

      ringChart1: {
        radius: '60%',
        activeRadius: '40%',
        digitalFlopStyle: {
          fontSize: 16
        },
        lineWidth: 16,
        data: [
          {
            name: 'P1',
            value: 343
          },
          {
            name: 'P2',
            value: 343
          },
          {
            name: 'P3',
            value: 343
          },
          {
            name: 'P4',
            value: 343
          },
          {
            name: 'P5',
            value: 343
          },
        ],
        showOriginValue: true,
        color: ["#FEDB5B","#37A2DA","#32C4E9","#65DFE2","#9FE7B9"],
      },
      ringChart2: {
        radius: '60%',
        activeRadius: '40%',
        digitalFlopStyle: {
          fontSize: 16
        },
        lineWidth: 16,
        data: [
          {
            name: 'P1',
            value: 343
          },
          {
            name: 'P2',
            value: 343
          },
          {
            name: 'P3',
            value: 343
          },
          {
            name: 'P4',
            value: 343
          },
          {
            name: 'P5',
            value: 343
          },
        ],
        showOriginValue: true,
        color: ["#FEDB5B","#37A2DA","#32C4E9","#65DFE2","#9FE7B9"],
      },
      ringChart3: {
        radius: '60%',
        activeRadius: '40%',
        digitalFlopStyle: {
          fontSize: 16
        },
        lineWidth: 16,
        data: [
          {
            name: 'P1',
            value: 343
          },
          {
            name: 'P2',
            value: 343
          },
          {
            name: 'P3',
            value: 343
          },
          {
            name: 'P4',
            value: 343
          },
          {
            name: 'P5',
            value: 343
          },
        ],
        showOriginValue: true,
        color: ["#FEDB5B","#37A2DA","#32C4E9","#65DFE2","#9FE7B9"],
      },

      pillarLineCmpConfig1: {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#FFF'
            }
          }
        },
        axisPointer: {
          label: {
            backgroundColor: '#314763',
          }
        },
        grid: {
          top: '30px',
          left: '10px',
          right: '10px',
          bottom: '12px',
          containLabel: true,
        },
        xAxis: [
          {
            type: 'category',
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月'],
            axisPointer: {
              type: 'shadow'
            },
            axisLabel: {
              color: '#FFF'
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#FFF',
              }
            },
            axisTick: {
              show: false,
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '',
            min: 0,
            max: 150,
            interval: 50,
            axisLabel: {
              color: '#FFF',
              formatter: '{value} %'
            },
            // 坐标轴分割线
            splitLine: {
              show: false,
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#FFF',
              }
            }
          },
        ],
        series: [
          {
            name: '',
            type: 'bar',
            tooltip: {
              valueFormatter: function (value) {
                return value;
              }
            },
            data: [
              80, 90, 50, 70, 55, 76, 80
            ],
            itemStyle: {
              color: '#21bccd',
            },
            barMaxWidth: '20%',
            showBackground: true,
          },
          {
            name: '达成率',
            type: 'line',
            tooltip: {
              valueFormatter: function (value) {
                return value;
              }
            },
            data: [63.00, 95.00, 75.00, 80.00, 85.30, 40.60, 98.90],
            itemStyle: {
              color: '#FFB300'
            },
            seriesLayoutBy: 'row',
            emphasis: { focus: 'series' }
          },
        ]
      },

      pillarLineCmpConfig2: {
        legend: {
          top: 'bottom',
          data: [
            {name: '1月',icon: 'circle',textStyle:{color:'#FFFFFF'}},
            {name: '2月',icon: 'circle',textStyle:{color:'#FFFFFF'}},
            {name: '3月',icon: 'circle',textStyle:{color:'#FFFFFF'}},
            {name: '4月',icon: 'circle',textStyle:{color:'#FFFFFF'}},
            {name: '5月',icon: 'circle',textStyle:{color:'#FFFFFF'}},
            {name: '6月',icon: 'circle',textStyle:{color:'#FFFFFF'}},
          ],
        },
        tooltip: {
          trigger: 'item',
          formatter: '【{b}：{c}%】',
          position: function (point, params, dom, rect, size) {
              //  size为当前窗口大小
              if ((size.viewSize[0] / 2) >= point[0]) {
                  //其中point为当前鼠标的位置
                  return [point[0] + 50, '10%'];
              } else {
                  //其中point为当前鼠标的位置
                  return [point[0] - 200, '10%'];
              }
          }
        },
        series: [
          {
            name: '',
            type: 'pie',
            radius: [10, 50],
            center: ['50%', '45%'],
            roseType: 'area',
            itemStyle: {
              borderRadius: 8,
            },
            data: [
              { value: 40, name: '1月' , itemStyle: {color: 'rgba(84,112,198,0.7)'} },
              { value: 38, name: '2月' , itemStyle: {color: 'rgba(159,225,128,0.7)'} },
              { value: 32, name: '3月' , itemStyle: {color: 'rgba(250,220,96,0.7)'} },
              { value: 30, name: '4月' , itemStyle: {color: 'rgba(255,112,112,0.7)'} },
              { value: 28, name: '5月' , itemStyle: {color: 'rgba(115,192,222,0.7)'} },
              { value: 26, name: '6月' , itemStyle: {color: 'rgba(59,162,144,0.7)'} },
            ],
            label: {
              color: '#FFFFFF',
            },
            emphasis: {
              itemStyle: {
                shadowColor: 'rgba(0,0,0,0)'
              }
            }
          }
        ]
      },

      pillarLineCmpConfig3: {
        tooltip: {
          trigger: 'axis',
        },
        // legend: {
        //   data: ['1月', '2月', '3月', '4月', '5月', '6月']
        // },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '12%',
          top: '15%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['1月', '2月', '3月', '4月', '5月', '6月'],
          axisPointer: {
            type: 'shadow'
          },
          axisLabel: {
            color: '#FFF'
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#FFF',
            }
          },
          axisTick: {
            show: false,
          }
      },
        yAxis: {
          type: 'value',
          min: 0,
          max: 150,
          interval: 50,
          axisLabel: {
            color: '#FFF',
            formatter: '{value} %'
          },
        },
        series: [
          {
            name: '',
            type: 'line',
            data: [63.00, 95.00, 75.00, 80.00, 85.30, 40.60],
            itemStyle: {
              color: '#FFB300'
            },
            smooth: true,
            // 区域填充样式
            areaStyle: {
              color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [{
                      offset: 0, color: 'rgba(255, 179, 0, .3)' // 0% 处的颜色
                  }, {
                      offset: 1, color: 'rgba(255,179,0,0.2)' // 100% 处的颜色
                  }],
                  global: false // 缺省为 false
              }
            },
            seriesLayoutBy: 'row',
            emphasis: { focus: 'series' }
          },
        ]
      },
      pillarLineCmpConfig4: {
        tooltip: {
          trigger: 'item',
          formatter: '【{b}：{c}%】',
        },
        legend: {
          show: true,
          orient: 'vertical',
          right: 10,
          y: 'center',
          data: ['FTY达成'],
          textStyle: {
              color: '#FFFFFF',
          },
        },
        angleAxis: {
          type: 'category',
          data: ['一月', '二月', '三月', '四月', '五月', '六月'],
          axisLine: {
            show: true,
            lineStyle: {
                color: "rgba(255,255,255,0.7)"
            }
          },
          axisLabel: {
            color: '#FFF'
          }
        },
        radiusAxis: {
          min: 0,
          max: 150,
          interval: 50,
          axisLabel: {
            // textStyle: {
            //     color: 'rgba(255,255,255,0.7)'
            // },
            color: '#FFF'
          },
          axisLine: {
            show: true,
            lineStyle: {
                color: 'rgba(255,255,255,0.7)'
            }
          },
          axisTick: {
            show: true,
          },
          splitLine: {
            show: true,
            lineStyle: {
                color: "rgba(255,255,255,0.7)"
            }
          }
        },
        polar: {
          center: ['45%','50%'],
          radius: [0, '65%'],
        },
        series: [
          {
            name: 'FTY达成',
            type: 'bar',
            // data: [50, 120, 140, 80, 90, 122],
            data: [
              { value: 50,name: '一月' , itemStyle: {color: 'rgba(0,229,255,0.7)'} },
              { value: 120,name: '二月' , itemStyle: {color: 'rgba(0,229,255,0.7)'} },
              { value: 140,name: '三月' , itemStyle: {color: 'rgba(0,229,255,0.7)'} },
              { value: 80,name: '四月' , itemStyle: {color: 'rgba(0,229,255,0.7)'} },
              { value: 90,name: '五月' , itemStyle: {color: 'rgba(0,229,255,0.7)'} },
              { value: 122,name: '六月' , itemStyle: {color: 'rgba(0,229,255,0.7)'} },
            ],
            coordinateSystem: 'polar',
            stack: 'a',
            emphasis: {
                focus: 'series'
            },
            itemStyle: {
              color: '#21bccd',
            },
          },
          
        ],
        
      },

      backgroundUrl1: `url("${require('../assets/factory-min-1.png')}")`,
      backgroundUrl2: `url("${require('../assets/factory-min-2.png')}")`,
      backgroundUrl3: `url("${require('../assets/factory-min-3.png')}")`,
      backgroundUrl4: `url("${require('../assets/factory-min-4.png')}")`,

      tb1Data: {
        title: '不良录入明细',
        dataList: [
          {id:'1',name:'MiNi产品线1',val:'20%'},
          {id:'2',name:'MiNi产品线2',val:'21%'},
          {id:'3',name:'MiNi产品线3',val:'22%'},
          {id:'4',name:'MiNi产品线4',val:'30%'},
          {id:'5',name:'MiNi产品线5',val:'10%'},
          {id:'6',name:'MiNi产品线6',val:'15%'},
          {id:'7',name:'MiNi产品线7',val:'33%'},
          {id:'8',name:'MiNi产品线8',val:'22%'},
          {id:'9',name:'MiNi产品线9',val:'11%'},
          {id:'10',name:'MiNi产品线10',val:'23%'},
          {id:'11',name:'MiNi产品线11',val:'32%'},
          {id:'12',name:'MiNi产品线12',val:'20%'},
          {id:'13',name:'MiNi产品线13',val:'10%'},
          {id:'14',name:'MiNi产品线14',val:'20%'},
          {id:'15',name:'MiNi产品线15',val:'10%'},
        ],
        headerNames: ['序号', '生产采集点', 'DT损失率'],
      },
      tb2Data: {
        title: '计划外DT明细',
        dataList: [
          {id:'1',name:'MiNi产品线1',val:'1%'},
          {id:'2',name:'MiNi产品线2',val:'2%'},
          {id:'3',name:'MiNi产品线3',val:'3%'},
          {id:'4',name:'MiNi产品线4',val:'4%'},
          {id:'5',name:'MiNi产品线5',val:'5%'},
          {id:'6',name:'MiNi产品线6',val:'6%'},
          {id:'7',name:'MiNi产品线7',val:'7%'},
          {id:'8',name:'MiNi产品线8',val:'8%'},
          {id:'9',name:'MiNi产品线9',val:'9%'},
          {id:'10',name:'MiNi产品线10',val:'10%'},
          {id:'11',name:'MiNi产品线11',val:'11%'},
          {id:'12',name:'MiNi产品线12',val:'12%'},
          {id:'13',name:'MiNi产品线13',val:'13%'},
          {id:'14',name:'MiNi产品线14',val:'14%'},
          {id:'15',name:'MiNi产品线15',val:'15%'},
        ],
        headerNames: ['序号', '生产采集点', 'DT损失率'],
      },

    };
  },
  components: { 
    // PillarLineEchartsCmp,
    TbCmp,
    RingCharCmp,
    SideMenu,
  },
};
</script>

<style lang="scss">
  .factory-min-container{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    overflow: hidden;

    // .factory-min-left-menu {
    //   width: 300px;
    //   // height: 100%;
    //   color: #fff;
    //   padding-top: 25px;
    //   background-color: rgba(15, 47, 92, 0.8);
    //   overflow: auto;
    // }

    .factory-min-middle-main {
      flex: 1;
      margin: 0px 20px;
      display: flex;
      flex-direction: column;
      background-color: rgba($color: #005ABF, $alpha: 0.2);
      padding: 30px;

      .factory-min-middle-main-info {
        height: 114px;
        background: rgba($color: #005ABF, $alpha: 0.2);
        padding: 10px 20px;

        table {
          width: 100%;
          height: 100%;
          font-size: .2rem;
          font-family: HarmonyOS_Sans_SC;

          // td {
          //   width: calc(100%/8)
          // }
        }

        .align-left {
          text-align: left;
          padding-left: .175rem;
          color: #21bccd;
        }

        .align-right {
          text-align: right;
        }
      }

      .factory-min-middle-main-tbl {
        margin-top: 10px;
        background: rgba($color: #005ABF, $alpha: 0.2);
      }
      
      .factory-min-middle-main-bar {
        margin-top: 10px;
        flex: 1;
        display: flex;
        background: rgba($color: #153863, $alpha: 0.2);
        overflow: auto;

        .factory-min-middle-main-bar-item {
          width: 33.33%;
          height: 100%;

          .factory-min-middle-main-bar-item-cmp {
            width: 100%;
            height: 100%;
          }
        }
        
      }
    }

    .factory-min-right-bar {
      height: 100%;
      width: 380px;
      display: flex;
      flex-direction: column;
      box-sizing: border-box;
      
      background-color: rgba(15, 47, 92, 0.8);

      .factory-min-right-bar-item {
        box-sizing: border-box;
        display: flex;
        // height: 24.5%;
        height: 50%;
      }
    }

   
    
  }

    
</style>
<style scoped>
.factory-min-middle-main-tbl >>> .dv-scroll-board .header .header-item {
  color:#FFF;
  font-size: 0.175rem;
}

.factory-min-middle-main-tbl >>> .rows .row-item {
  height: .45rem !important;
  line-height: .45rem !important;
  border-bottom: 1px solid rgba(0,0,0,0.16);
}

.factory-min-middle-main-tbl >>> .rows .row-item .ceil {
  font-size: 0.175rem;
}
</style>
<style>
.tbl-row-style {
  display: inline-block;
  width: 100%;
  height:100%;
  color: #FFF;
  text-align: center;
}
</style>